import './index.scss';
import React, { useEffect, useState } from "react";
// import baoshi from '@/assets/icons/baoshi.png';
import Logo from '@/assets/photos/LogoLogin.png'
import txtLogin from '@/assets/photos/txtLogin.png'
import { user_login } from '@/utils/mixin.ts'
import { Button, Checkbox, Form, Input, message } from 'antd';
import { useNavigate } from 'react-router-dom';
const Login = () => {
    // const [trade, setTrade] = useState(null); 
    // const [reward, setReward] = useState(null)
    // useEffect 第二个参数为空数组表示仅在组件挂载时执行
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate()
    // const [messageApi, contextHolder] = message.useMessage();
    useEffect(() => {
        // 这里是 componentDidMount 的逻辑
        // console.log("Component is mounted");
        // const res = get_platform_trade({currency: 'BNB'})
        
        // 如果有清理逻辑，例如清理定时器，可以在这里添加
        // return () => {
        //   console.log("Component will unmount");
        //   // 清理逻辑
        // };
        
       
      }, []);  // 空数组表示只在组件挂载时执行

      const fetchData = async () => {
        
        try {
            const res = await user_login({ email: username, password });
            console.log(res)
            if(res.code == -1) {
                message.error('Login failed. Check your username and password.');
                // messageApi.error('Login failed. Please check your username and password.');
            }else {
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('email', res.data.email)
                navigate('/dashboard/home')
            }
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    };

    const Signup = () => {
        navigate('/signup')
    }

    const Reset = () => {
        navigate('/reset')
    }

      const onFinish = (values) => {
        console.log('Success11:', values);
        fetchData()
      };
      
      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };

      const handleUsernameChange = (e) => {
        setUsername(e.target.value);
      };
    
      const handlePasswordChange = (e) => {
        setPassword(e.target.value);
      };

    
    return (
        <div className='login signup'>
            <div className='main-login'>
                <div className='logo'>
                      <img src={Logo} />
                      <img src={txtLogin} />
                </div>
                <p>Embrace the Future of Trading!</p>
                <div className='form'>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                    label=""
                    name="username"
                    className='user'
                    rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                    <Input placeholder='Username' value={username} onChange={handleUsernameChange} />
                    </Form.Item>

                    <Form.Item
                    label=""
                    name="password"
                    className='pwd'
                    rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                    <Input.Password placeholder='Password' value={password} onChange={handlePasswordChange}  />
                    </Form.Item>

                    <Form.Item >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
                <span className='span' onClick={() => {Reset()}}>
                     Forgot Password?
                </span>
                <div className='up'>
                    <p>Don't have an account?</p><span onClick={() => {Signup()}}> Sign up</span>
                </div>
                </div>
            </div>
        </div>
    );
};

export default Login;
